<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
        需求1：定义一个V-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
        需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

        自定义指令总结：
            一、定义语法：
                (1).局部指令：
                new Vue({                                       new Vue({
                    directives:{指令名：配置对象}     或            directives{指令名：回调函数}
                })                                              })
                (2).全局指令：
                    Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)
            二、配置对象中常用的3个回调：
                (1).bind:指令与元素成功绑定时调用。
                (2).inserted:指令所在元素被插入页面时调用。
                (3).update:指令所在模板结构被重新解析时调用。
            三、备注：
                1.指令定义时不加v-,但使用时要加v-:
                2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前n值是:<span v-text="n"></span></h2>
        <h2>放大10倍后n值是:<span v-big="n"></span></h2>
        <!-- <h2>放大10倍后n值是:<span v-big-number="n"></span></h2> -->
        <button @click="n++">n+1</button>
        <hr>
        <!-- v-bind <input type="text" v-bind:value="n"><br/> -->
        v-fbind <input type="text" v-fbind:value="n">
    </div>
    <div id="root2">
        v-fbind <input type="text" v-fbind:value="x">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时产生产提示
    // 全局指令
    // Vue.directive('fbind', {
    //     // 指令与元素成功绑定时（一上来）
    //     bind(element, binding) {
    //         // console.log('bind');
    //         console.log('fbind-bind', this);
    //         element.value = binding.value
    //     },
    //     // 指令所在元素被插入页面时
    //     inserted(element, binding) {
    //         // console.log('inserted');
    //         console.log('fbind-inserted', this);
    //         element.focus()
    //     },
    //     // 指令所在的模板被重新解析时
    //     update(element, binding) {
    //         // console.log('update');
    //         console.log('fbind-update', this);
    //         element.value = binding.value
    //     }
    // })
    // Vue.directive('big', function (element, binding) {
    //     // console.log('big');
    //     console.log('big', this);//此处的this是window
    //     element.innerText = binding.value * 10
    // })

    new Vue({
        el: '#root',
        data() {
            return {
                name: '尚硅谷',
                n: 1
            }
        },
        directives: {
            //big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时(name修改时也会调用，不能说n修改时才调用)
            big(element, binding) {
                // console.log('big');
                console.log('big', this);//此处的this是window
                element.innerText = binding.value * 10
            },
            // 'big-number'(element, binding) {
            //     // console.log(big);
            //     element.innerText = binding.value * 10
            // },

            // 一上来没获取到焦点，因为Vue先进行指令与元素绑定，此时会调用fbind，但时页面没有input元素，没法获取焦点，无法满足需求
            // fbind(element, binding){
            //     element.value=binding.value
            //     element.focus()
            // }

            fbind: {
                // 指令与元素成功绑定时（一上来）
                bind(element, binding) {
                    // console.log('bind');
                    console.log('fbind-bind', this);
                    element.value = binding.value
                },
                // 指令所在元素被插入页面时
                inserted(element, binding) {
                    // console.log('inserted');
                    console.log('fbind-inserted', this);
                    element.focus()
                },
                // 指令所在的模板被重新解析时
                update(element, binding) {
                    // console.log('update');
                    console.log('fbind-update', this);
                    element.value = binding.value
                }
            }
        }
    })

    // new Vue({
    //     el: '#root2',
    //     data() {
    //         return {
    //             x: 1
    //         }
    //     },
    // })
</script>

</html>